<template>
	<div class="loginContainer">
		<div class="loginInner">
			<div class="login_header">
				<div class="login_header_title">
					<a href="javascript:;" :class="{on:loginWay}" @click="loginWay=true">短信登录</a>
					<a href="javascript:;" :class="{on: !loginWay}" @click="loginWay=false">密码登录</a>
				</div>
			</div>
			<!-- 内容部分 -->
			<div class="login_content">
				<form @submit.prevent="login">
					<!-- 短信登录 -->
					<div :class="{on: loginWay}" class="loginform">
						<section class="login_message">
							<input type="tel" maxlength="11" placeholder="手机号" v-model="phone" />
							<button :disabled="!rightPhone" class="get_verification" :class="{right_phone:rightPhone}" @click.prevent="getCode">{{computeTime>0 ? `(${computeTime}s)已发送` : '获取验证码'}}</button>
						</section>
						<section class="login_verification">
							<input type="tel" maxlength="4" placeholder="验证码" v-model="code">
						</section>
						<section class="login_hint">
							温馨提示：登录即表示您已阅读、理解并同意<br>
							<a href="javascript:;">《用户服务协议》</a>
						</section>
					</div>
					<!-- 密码登录 -->
					<div :class="{on:!loginWay}" class="loginform">
						<section class="login_message">
							<input type="tel" maxlength="11" placeholder="手机号/用户名" v-model="name" />
						</section>
						<section class="login_verification">
							<input type="text" maxlength="16" placeholder="密码" v-if="showPwd" v-model="pwd" />
							<input type="password" maxlength="16" placeholder="密码" v-else v-model="pwd" />
							<section class="switch_button" :class="showPwd ? 'on' : 'off'" @click="showPwd = !showPwd">
								<section class="switch_circle" :class="{right : showPwd}"></section>
								<section class="switch_text">{{showPwd ? 'abc' : '....'}}</section>
							</section>
						</section>
					</div>
					<button class="login_submit" @click="login_submit">登录</button>
				</form>
			</div>
			<div class="forgetPwd"><router-link to='../pwd/pwd'><a>忘记密码</a></router-link></div>
		</div>
		<div class="register">没有账号？<router-link to='../reg/reg'><a>立即注册</a></router-link></div>
	</div>
</template>

<script>
	import service from '../../service.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mInput from '../../components/m-input.vue'
	import {msg} from '../../api/login/login.js'
	import {phonelogin} from '../../api/login/login.js'
	import {namelogin} from '../../api/login/login.js'
	import store from 'store'
	export default {
		name: "Login",
		data() {
			return {
				loginWay: true, //true代表短信登陆, false代表密码
				phone: '', //手机号,
				computeTime: 0,
				code: '', //验证码
				timer: null,
				showPwd: false,
				pwd: '',
				name
			};
		},
		computed: {
			rightPhone() {
				//利用正则对手机号匹配
				return /^1[3456789]\d{9}$/.test(this.phone);
			}
		},
		methods: {
			...mapMutations(['signin']),
			login_submit(){
				this.login();
			},
			getCode() {
				if (!this.computeTime) {
					this.computeTime = 30;
					this.timer = setInterval(() => {
						this.computeTime--;
						if (this.computeTime <= 0) {
							clearInterval(this.timer)
						}
					}, 1000);
					// 短信倒计开始时即请求服务器
					msg({phone:this.phone}).then(res=>{
						this.$message.success("短信已发送");
					})
				}
			},
			login() {
				uni.showLoading({
				    title: '正在登录...'
				});
				//短信验证
				if (this.loginWay) {
					if(this.phone.length==0||this.code.length==0){
						uni.hideLoading();
						this.$message.error('信息填写不完整');
						return false;
					}
					var phonereg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
					if (!phonereg.test(this.phone)||this.phone.length!=11) {
						uni.hideLoading();
						this.$message.error('手机号不正确');
						return false;
					} 
					if (!/^\d{4}$/.test(this.code)) {
						uni.hideLoading();
						this.$message.error('验证码是4位纯数字');
						return false;
					}
					// 手机号验证码登录
					var params = {phone:this.phone,code:this.code};
					phonelogin(params).then(res=>{
						uni.hideLoading();
						if(res.code==200){
							this.$store.commit('signin',res.data);
							this.$message.success("登陆成功");
							this.$router.push('../main/main');
						} else {
							this.$message.error(res.msg);
						}
					})
				} else {
					if(this.name.length==0||this.pwd.length==0){
						uni.hideLoading();
						this.$message.error('信息填写不完整');
						return false;
					}
					//用户名和密码验证
					if (this.name.length<2||this.name.length>8) {
						if(this.name.length!=11){
							uni.hideLoading();
							this.$message.error('手机号或用户名填写不正确');
							return false;
						}
					} 
					if(this.pwd.length<8||this.pwd.length>16){
						uni.hideLoading();
						this.$message.error('密码必须是8-16位数字和字母');
						return false;
					}
					if (!/^(?![^a-zA-Z]+$)(?!\D+$)/.test(this.pwd)) {
						uni.hideLoading();
						this.$message.error('密码必须包含数字、字母');
						return false;
					}
					// 账户名密码或手机号密码登录
					var params = {name:this.name,pwd:this.pwd};
					namelogin(params).then(res=>{
						uni.hideLoading();
						if(res.code==200){
							this.$store.commit('signin',res.data);
							this.$message.success("登陆成功");
							this.$router.push('../main/main')
						} else {
							this.$message.error(res.msg);
						}
					})
				}
			}
		}
	};
</script>


<style scoped>
	.loginContainer {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.loginInner {
		width: 80%;
		margin: 0 auto;
		padding-top: 60px;
	}

	.loginInner .login_header .login_logo {
		color: #0faeff;
		font-weight: bolder;
		font-size: 40px;
		text-align: center;
	}

	.login_header .login_header_title {
		text-align: center;
		padding-top: 40px;
	}

	.login_header_title a {
		text-decoration: none;
		font-size: 14px;
		color: #333;
		padding-bottom: 4px;
	}

	.login_header_title a:first-child {
		margin-right: 40px;
	}

	.login_header_title a.on {
		color: #0faeff;
		font-weight: bolder;
		border-bottom: 2px solid #0faeff;
	}

	.login_content form .loginform {
		display: none;
	}
	
	.login_content form .loginform.on {
		display: block;
	}

	.login_content form input {
		width: 100%;
		height: 100%;
		border: 1px solid #ddd;
		border-radius: 4px;
		outline: none;
		padding-left: 10px;
		box-sizing: border-box;

	}

	.login_content form input:focus {
		border: 1px solid #0faeff;
	}

	.login_message {
		position: relative;
		margin-top: 16px;
		height: 48px;
		font-size: 14px;
		background: #fff;
	}

	.login_message .get_verification {
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		border: none;
		color: #ccc;
		background: transparent;
		font-size: 14px;
	}

	.login_message .get_verification.right_phone {
		color: #000;
	}

	.login_hint {
		text-align: center;
		color: #999;
		margin-top: 12px;
		font-size: 14px;
		line-height: 20px;
	}

	.login_hint a {
		text-decoration: none;
		color: #0faeff;
	}

	.login_verification {
		position: relative;
		margin-top: 16px;
		height: 48px;
		font-size: 14px;
		background: #fff;
	}

	.login_verification .switch_button {
		border: 1px solid #ddd;
		width: 30px;
		height: 16px;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		border-radius: 8px;
		padding: 0 6px;
		line-height: 16px;
		font-size: 12px;
		transition: background-color 0.3s;

	}

	.login_verification .switch_button.on {
		background: #0faeff;
	}

	.login_verification .switch_button.off {
		background: #fff;
	}

	.switch_button .switch_circle {
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 50%;
		width: 16px;
		height: 16px;
		position: absolute;
		left: -1px;
		top: -1px;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	}

	.switch_button .switch_circle.right {
		transform: translateX(30px);
	}

	.switch_button .switch_text {
		color: #ddd;
		float: right;
	}

	.login_submit {
		display: block;
		width: 100%;
		height: 42px;
		margin-top: 30px;
		background: #0faeff;
		border-radius: 4px;
		font-size: 16px;
		line-height: 42px;
		color: #fff;
		text-align: center;
		border: none;
	}
	.register{
		font-size: 14px;
		color: #999;
		position:fixed;
		bottom:20px; 
		width: 100%;
		text-align: center;
	}
	.register a {
		text-decoration: none;
		color: #0faeff;
	}
	.forgetPwd{
		text-align: right;
		font-size: 14px;
		padding-top: 15px;
	}
	.forgetPwd a{
		text-decoration: none;
		color: #0faeff;
	}
</style>
